<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS-检测用户名</title>
    <script>
        function checkForm() {
            var nameValue = document.getElementById('username').value;
            if (nameValue ===''){
                alert('用户名不能为空！');
                return false
            }
            var passValue = document.getElementById('passwd').value;
            if (passValue.length <= 6){
                alert('密码长度需大于6');
                return false
            }

        }

    </script>
</head>
<body>
<!--
实现步骤:
 1. 确定事件类型onsubmit(常见事件类型的网址: http://www.w3school.com.cn/js/js_htmldom_events.asp);
 2. 对这个事件绑定一个函数(执行的操作写在函数里面);
 3. 函数的核心功能: 校验用户名是否为空?
  1). 获取输入用户名标签提交的内容；
  2). if判断用户名是否为空?
  3). 如果数据合法， 继续执行， 提交表单；
  4). 如果数据不合法， 不让表单提交? (显示弹出框报错) --- alert
-->
<!--onsubmit 事件会在表单中的确认按钮被点击时发生-->
<form action="#" method="get" onsubmit="return checkForm()">

    用户名: <input type="text" name="username" placeholder="用户名" id="username"><br/>
    密码: <input type="password" name="passwd" placeholder="密码" id="passwd"><br/>
    <input type="submit" value="注册">

</form>

</body>!
</html>

